<template>
  <div class="publiclist" v-for="item in Info" :key="item.id">
    <router-link :to="`/article/${item.id}`">
      <div class="pubnav">
        <!-- <van-image
          round
          width="35"
          height="35"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        /> -->

        <div class="pubnavright">
          <span style="color: #1b2635; font-weight: 500">{{ item.title }}</span>
          <p style="padding: 0; margin: 0; font-size: 12px; color: #a2a2a2">
            {{ item.author }}
          </p>
        </div>
      </div>
      <div class="pubart">
        <p>
          {{ stripHtml(item.content) }}
        </p>
      </div>
      <div class="pubimg">
        <van-image
          radius="10"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <van-image
          radius="10"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <van-image
          radius="10"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </div>
    </router-link>

    <!-- <div class="pubaddress">
        <span>{{ item.location }} </span>
        <span>{{ item.created_at.substring(0, 10) }}</span>
        <span>{{ item.collection }} </span>
      </div> -->

    <!-- <div class="pubdiscuss">
        <div class="iconfont discussicon icon-guankan" style="font-size: 26px">
          <span style="font-size: 14px; color: #737373">{{ item.views }}</span>
        </div>

        <div class="iconfont discussicon icon-pinglun-" style="font-size: 23px">
          <span style="font-size: 14px; color: #737373">{{
            item.comments
          }}</span>
        </div>

        <div class="iconfont discussicon icon-dianzan1" style="font-size: 23px">
          <span style="font-size: 14px; color: #737373">{{ item.likes }}</span>
        </div>
      </div> -->

    <div class="pubaddress">
      <span>{{ item.location }} </span>
      <span>{{ item.created_at.substring(0, 10) }}</span>
      <span>{{ item.collection }} </span>
    </div>
    <div class="pubdiscuss">
      <div class="iconfont discussicon icon-guankan" style="font-size: 26px">
        <span style="font-size: 14px; color: #737373">{{ item.views }}</span>
      </div>

      <!-- 实现自动增加阅读数量 -->

      <div class="iconfont discussicon icon-pinglun-" style="font-size: 23px">
        <span style="font-size: 14px; color: #737373">{{ item.comments }}</span>
      </div>

      <div class="iconfont discussicon icon-dianzan1" style="font-size: 23px">
        <span style="font-size: 14px; color: #737373">{{ item.likes }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { onMounted } from 'vue'
import { ref } from 'vue'
import axios from 'axios'

const Info = ref({})

// const views = ref(0)

const userStore = useUserStore()
const getInfo = () => {
  axios
    .get('http://localhost:3000/api/get')
    .then((res) => {
      console.log(res)
      Info.value = res.data
      console.log(Info.value)
      userStore.setInfo(res.data)
    })
    .catch((err) => {
      console.log(err)
    })
}
onMounted(() => {
  getInfo()
})
//点击文章，获取文章id,跳转到详情页
const handleIndex = (id) => {
  console.log(id)
  // this.$router.push({ path: '/articleDetail', query: { id: id } })
}

//去除html标签，显示纯文本
const stripHtml = (html) => {
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = html
  return tempDiv.textContent || tempDiv.innerText || ''
}
</script>

<style>
.publiclist {
  padding-top: 10px;

  width: 100%;
  /* height: 200px; */
  background-color: #fff;
  /* border-bottom: 1px solid #ccccccc9; */
}
.publiclist .pubnav {
  display: flex;
  width: 100%;
  height: 35px;
  /* background-color: #ccc;; */
}
.publiclist .pubnav .pubnavright {
  margin-left: 5px;
}
.publiclist .pubart {
  padding-top: 8px;
  width: 100%;

  font-size: 14px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: 3;
}
.publiclist .pubart p {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-indent: 2em;
  overflow: hidden;
  line-height: 1.5; /* 设置行间距 */
}
.publiclist .pubimg {
  padding-top: 3px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.publiclist .pubimg .van-image {
  padding: 2px;
  height: 85px;
}

.publiclist .pubaddress {
  padding-top: 9px;
  font-size: 13px;
  color: #4f98f6;

  display: flex;
  justify-content: start;
  align-items: center;
}
.publiclist .pubaddress span {
  margin-right: 10px;
}
.publiclist .pubdiscuss {
  padding-top: 5px;
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  border-bottom: 0.5px solid #ccc;
  /* color: #4f98f6; */
}
.publiclist .pubdiscuss .discussicon {
  display: flex;
  justify-content: center;
  align-items: center;
}
a {
  list-style: none;
  color: #000;
}
</style>
